<template>
	<view>
		<view class="user-item">
			<image class="avatar" @click="jumpUser(postDetail.user_id)" mode="aspectFill"
				:src="$utils.imgPath(postDetail.user.avatar)"></image>
			<text class="username">{{ postDetail.user.nickname }}</text>
			<view class="btn" v-if="postDetail.is_follow" size="mini" @click="cancelFollow">已关注</view>
			<view class="btn" v-else size="mini" @click="follow">
				<u-icon name="plus"></u-icon>
				<text>关注</text>
			</view>
		</view>
		<view class="info-box">
			<!-- 轮播图 -->
			<block v-if="postDetail.media.length > 0">
				<u-swiper @click="handelSwiper" :list="postDetail.media" radius="0"
					@change="(e) => (currentNum = e.current)" height="800rpx">
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ postDetail.media.length }}</text>
					</view>
				</u-swiper>
			</block>
			<view class="post-content-wrap">
				<navigator class="discuss-item" :url="'/pages/discuss/detail?title=' + item"
					v-for="(item, index) in postDetail.discuss_list" :key="index">#{{ item }}#</navigator>
				<text @longpress="onCopy">{{ postDetail.content }}</text>
			</view>
			<!-- 圈子信息 -->
			<navigator v-if="postDetail.topic" class="topic-info"
				:url="'/pages/topic/index?topic_id=' + postDetail.topic_id">
				<image mode="aspectFill" class="cover" :src="$utils.imgPath(postDetail.topic.cover_image)"></image>
				<view class="center">
					<view class="desc">{{ postDetail.topic.name.substring(0, 15) }}</view>
					<view class="count-txt">{{ postDetail.topic.user_num }}人加圈 | {{ postDetail.topic.post_num }}篇内容
					</view>
				</view>
				<view class="right">进圈子</view>
			</navigator>

			<view style="margin: 10rpx 30rpx; color: #616161; font-size: 28rpx">{{ postDetail.created_at | timeFrom }}
			</view>
		</view>

		<view style="color: #616161; font-size: 28rpx; padding: 20rpx">共 {{ postDetail.comment_num }} 条评论</view>
		<!-- 评论列表 -->
		<block v-for="(item, index) in commentList" :key="index">
			<view class="comment-item" @click="onChildrenCommentItem(item)">
				<image class="avatar-img" :src="$utils.imgPath(item.user.avatar)"></image>
				<view class="comment-item_right">
					<view class="nickname">{{ item.user.nickname }}</view>
					<view class="content">{{ item.content }}</view>
					<view class="time-desc">
						<text>{{ $u.timeFrom(item.created_at) }}</text>
					</view>
				</view>
				<view v-if="item.has_thumb" @click.stop="onThumbCancel(item)" class="thumb-wrap">
					<wd-icon name="heart-filled" color="#fd3d4c" size="40rpx"></wd-icon>
					<text v-if="item.thumb_num > 0">{{ item.thumb_num }}</text>
				</view>
				<view v-else @click.stop="onThumb(item)" class="thumb-wrap">
					<wd-icon name="heart" color="#616161" size="40rpx"></wd-icon>
					<text v-if="item.thumb_num > 0">{{ item.thumb_num }}</text>
				</view>
			</view>
			<!-- 二级评论列表 -->
			<block v-if="item.children">
				<view class="comment-item children-comment-item" @click="onChildrenCommentItem(item)">
					<image class="avatar-img" :src="$utils.imgPath(item.children.user.avatar)"></image>
					<view class="comment-item_right">
						<view class="nickname">
							<text>{{ item.children.user.nickname }}</text>
							<text style="margin: 0 10rpx; font-size: 24rpx; color: #000">回复</text>
							<text>{{ item.children.reply_user.nickname }}</text>
						</view>
						<view class="content">{{ item.children.content }}</view>
						<view class="time-desc">
							<text>{{ $u.timeFrom(item.created_at) }}</text>
						</view>
						<view class="collapse" style="margin-top: 10rpx"
							v-if="item.children.total > 1 && !item.childrenList" @click.stop="onCollapseComment(item)">
							展开{{ item.children.total - 1 }}条回复
						</view>
					</view>
					<view v-if="item.children.has_thumb" @click.stop="onThumb(item.children)" class="thumb-wrap">
						<wd-icon name="heart-filled" color="#fd3d4c" size="40rpx"></wd-icon>
						<text v-if="item.children.thumb_num > 0">{{ item.children.thumb_num }}</text>
					</view>
					<view v-else @click.stop="onThumb(item.children)" class="thumb-wrap">
						<wd-icon name="heart" color="#616161" size="40rpx"></wd-icon>
						<text v-if="item.children.thumb_num > 0">{{ item.children.thumb_num }}</text>
					</view>
				</view>
			</block>
			<block v-if="item.childrenList">
				<view class="comment-item children-comment-item"
					v-for="(childrenItem, childrenIndex) in item.childrenList" :key="childrenItem.id"
					@click="onChildrenCommentItem(item)">
					<image class="avatar-img" :src="$utils.imgPath(childrenItem.user.avatar)"></image>
					<view class="comment-item_right">
						<view class="nickname">
							<text>{{ childrenItem.user.nickname }}</text>
							<text style="margin: 0 10rpx; font-size: 24rpx; color: #000">回复</text>
							<text>{{ childrenItem.reply_user.nickname }}</text>
						</view>
						<view class="content">{{ childrenItem.content }}</view>
						<view class="time-desc">
							<text>{{ $u.timeFrom(item.created_at) }}</text>
						</view>
					</view>
					<view v-if="childrenItem.has_thumb" @click.stop="onThumbCancel(childrenItem)" class="thumb-wrap">
						<wd-icon name="heart-filled" color="#fd3d4c" size="40rpx"></wd-icon>
						<text v-if="childrenItem.thumb_num > 0">{{ childrenItem.thumb_num }}</text>
					</view>
					<view v-else @click.stop="onThumb(childrenItem)" class="thumb-wrap">
						<wd-icon name="heart" color="#616161" size="40rpx"></wd-icon>
						<text v-if="childrenItem.thumb_num > 0">{{ childrenItem.thumb_num }}</text>
					</view>
				</view>
				<view v-if="item.hasMore" class="collapse" style="margin-left: 160rpx; padding: 20rpx 20rpx 20rpx 0"
					@click.stop="onMoreComment(item)">展开更多</view>
			</block>
		</block>
		<!-- 加载状态 -->
		<block v-if="commentList.length > 0">
			<view style="margin: 30rpx">
				<u-loadmore :status="loadStatus" />
			</view>
		</block>
		<block v-else>
			<u-empty text="暂无评论" mode="message" icon="/static/empty.png"></u-empty>
		</block>
		<!-- 评论输入框 -->
		<view style="height: 200rpx"></view>
		<view class="tool-wrap" :style="[toolStyle]">
			<block v-if="isShowCommentInput">
				<view class="input-wrap">
					<textarea class="comment-input" v-model="form.content" :maxlength="-1" confirm-type="send"
						:show-confirm-bar="false" auto-focus auto-height fixed :placeholder="placeholder"
						:adjust-position="false" />
					<view style="display: flex">
						<view style="margin-left: auto; margin-top: 20rpx">
							<u-button @click="addComment" type="primary" text="发送" size="small"></u-button>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="input-tips" @click="onInput">
					<wd-icon name="edit-1" size="24rpx"></wd-icon>
					<text class="ml10">说点什么...</text>
				</view>
				<!-- 点赞 -->
				<view v-if="postDetail.is_thumb" @click="onPostThumbCancel" class="num-wrap">
					<u-icon name="heart-fill" color="#fd3d4c" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.thumb_num }}</text>
				</view>
				<view v-else @click="onPostThumbAdd" class="num-wrap">
					<u-icon name="heart" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.thumb_num }}</text>
				</view>
				<!-- 收藏 -->
				<view v-if="postDetail.is_collect" @click="onPostCollectCancel" class="num-wrap">
					<u-icon name="star-filled" color="#fd3d4c" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.collect_num }}</text>
				</view>
				<view v-else class="num-wrap" @click="onPostCollectAdd">
					<u-icon name="star" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.collect_num }}</text>
				</view>
				<!-- 分享 -->
				<view class="num-wrap" @click="showShare = true">
					<u-icon name="moments-circel-fill" color="#5ac725" size="54rpx"></u-icon>
				</view>
			</block>
		</view>
		<!-- 评论遮罩层 -->
		<u-overlay :show="isShowCommentInput" @click="isShowCommentInput = false" :zIndex="9"></u-overlay>
		<!-- 分享海报 -->
		<q-post-share @success="onPostShare" :coverImg="postDetail.media[0]" :contentText="postDetail.content"
			:qrCodeImg="qrCodeImg"></q-post-share>
		<!-- 海报弹窗 -->
		<u-popup :show="showSharePostImg" mode="center" width="80%" :round="10" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="true" @close="showSharePostImg = false">
			<view>
				<image style="display: block" :src="sharePostImg" :show-menu-by-longpress="true" mode="widthFix">
				</image>
				<view style="color: #999; text-align: center; padding: 30rpx 0">长按保存图片</view>
			</view>
		</u-popup>
		<!-- 分享弹窗 -->
		<u-action-sheet :actions="shareList" :show="showShare" :round="10" cancelText="取消" :closeOnClickOverlay="true"
			@close="showShare = false" @select="onShareItem"></u-action-sheet>
		<!-- 悬浮按钮 -->
		<view class="fab-wrap">
			<navigator class="fab-item" open-type="switchTab" url="/pages/index/index">
				<text>返回</text>
				<text>首页</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showShare: false,
				shareList: [{
						key: 'wechat',
						name: '发给微信好友',
						openType: 'share'
					},
					{
						key: 'image',
						name: '分享海报'
					}
				],
				currentNum: 0,
				postId: 0,
				postDetail: {
					comment: [],
					media: [],
					comment_list: {
						data: []
					},
					user: {
						avatar: ''
					}
				},
				focus: false,
				isSubmitD: false,
				commentList: [],
				placeholder: '说点什么...',
				form: {
					pid: 0,
					reply_user_id: '',
					post_id: '',
					content: ''
				},
				page: 1,
				loadStatus: 'loadmore',
				discussList: [],
				sharePostImg: '',
				qrCodeImg: '',
				showSharePostImg: false,
				isShowCommentInput: false,
				toolStyle: {}
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad(options) {
			this.postId = options.id;

			if (options.scene) {
				this.postId = options.scene;
			}

			this.form.post_id = this.postId;
			this.getPostDetail();
			this.getCommentList();

			this.getQrCode();
			this.onKeyboardChange();
		},
		onReachBottom() {
			this.page++;
			this.getCommentList();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			let imgURL;
			if (this.postDetail.media.length > 0) {
				imgURL = this.postDetail.media[0];
			}
			return {
				title: this.postDetail.content,
				path: '/pages/post/detail?id=' + this.postId,
				imageUrl: imgURL
			};
		},
		onShareTimeline() {
			let imgURL = (imgURL = this.postDetail.media[0]);
			return {
				title: this.postDetail.content,
				imageUrl: imgURL,
				query: 'id=' + this.postId
			};
		},
		methods: {
			onInput() {
				this.isShowCommentInput = true;
				this.form.pid = 0
				this.form.reply_user_id = null
				this.placeholder = "说点什么..."
			},
			onShareItem(e) {
				let key = e.key;
				if (key == 'image') {
					this.showSharePostImg = true;
				}
			},
			getQrCode() {
				this.$H
					.get('post/qrCode', {
						post_id: this.postId
					})
					.then((res) => {
						if (res.code == 200) {
							this.qrCodeImg = res.result.url;
						}
					});
			},
			onPostShare(val) {
				this.sharePostImg = val;
			},
			handelSwiper(index) {
				uni.previewImage({
					current: index, // 当前显示图片的http链接
					urls: this.postDetail.media // 需要预览的图片http链接列表
				});
			},
			// 删除评论
			delComment(e, index, index2) {
				let that = this;

				if (e.user_id != this.userInfo.id) {
					return;
				}

				uni.showModal({
					title: '提示',
					content: '确定删除该评论？',
					success: function(res) {
						if (res.confirm) {
							that.$H
								.post('comment/del', {
									id: e.id
								})
								.then((res2) => {
									if (res2.code == 1) {
										if (index2 || index2 === 0) {
											that.commentList[index].children.splice(index2, 1);
										} else {
											that.commentList.splice(index, 1);
										}
									}
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			onCopy() {
				let that = this;
				uni.setClipboardData({
					data: this.postDetail.content,
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			// 评论点赞
			onThumb(id, index, index2) {
				this.$H
					.post('comment/thumbAdd', {
						id: id
					})
					.then((res) => {
						if (res.code == 200) {
							if (index2 || index2 == 0) {
								this.commentList[index].children[index2].is_thumb = true;
								this.commentList[index].children[index2].thumb_num++;
							} else {
								this.commentList[index].is_thumb = true;
								this.commentList[index].thumb_num++;
							}
						}
					});
			},
			// 评论取消点赞
			cancelThumb(id, index, index2) {
				this.$H
					.post('comment/cancelThumb', {
						id: id
					})
					.then((res) => {
						if (res.code == 200) {
							if (index2 || index2 == 0) {
								this.commentList[index].children[index2].is_thumb = false;
								this.commentList[index].children[index2].thumb_num--;
							} else {
								this.commentList[index].is_thumb = false;
								this.commentList[index].thumb_num--;
							}
						}
					});
			},
			// 回复评论
			onChildrenCommentItem(row) {
				this.isShowCommentInput = true;
				this.placeholder = '回复：' + row.user.nickname;
				this.form.pid = row.id;
				this.form.reply_user_id = row.user_id;
			},
			// 输入框失去焦点时
			onBlur() {
				this.placeholder = '说点什么...';
				this.focus = false;
				this.form.pid = 0;
			},
			// 获取评论列表
			getCommentList() {
				this.loadStatus = 'loading';
				this.$H
					.get('comment/list', {
						post_id: this.postId,
						page: this.page
					})
					.then((res) => {
						if (res.code == 200) {
							this.commentList = this.commentList.concat(res.result.list);
	if (res.result.hasMorePages) {
							this.loadStatus = 'loadmore';
						} else {
							this.loadStatus = 'nomore';
						}
						}
					});
			},
			//获取子级评论列表
			onCollapseComment(row) {
				this.$set(row, 'page', 1);
				this.$set(row, 'childrenList', []);

				this.getChildrenCommentList(row);
			},
			onMoreComment(row) {
				row.page++;
				this.getChildrenCommentList(row);
			},
			getChildrenCommentList(row) {
				this.$H
					.get('comment/getChildrenList', {
						parent_id: row.children.pid,
						page: row.page,
						frist_id: row.children.id
					})
					.then((res) => {
						this.$set(row, 'childrenList', row.childrenList.concat(res.result.list));

						if (res.result.hasMorePages) {
							this.loadStatus = 'loadmore';
						} else {
							this.loadStatus = 'nomore';
						}
					});
			},
			jumpUser(userId) {
				uni.navigateTo({
					url: '/pages/user/home?user_id=' + userId
				});
			},
			addComment() {
				this.isSubmitD = true;
				if (this.form.content == '') {
					this.$u.toast('评论不能为空');
					this.isSubmitD = false;
					return;
				}

				uni.showLoading({
					mask: true,
					title: '发布中'
				});

				this.$H.post('comment/addComment', this.form).then((res) => {
					if (res.code == 200) {
						this.form.content = '';
						this.$u.toast('评论成功');
						this.page = 1;
						this.commentList = [];
						this.getCommentList();
					}
					this.isSubmitD = false;
					uni.hideLoading();
					this.isShowCommentInput = false;
				});
			},
			getPostDetail() {
				this.$H
					.get('post/detail', {
						id: this.postId
					})
					.then((res) => {
						if (res.result.media) {
							res.result.media.forEach((item, index) => {
								res.result.media[index] = this.$utils.imgPath(item);
							});
						}

						this.postDetail = res.result;
					});
			},
			onPostThumbCancel() {
				this.$H
					.post('post/thumbCancel', {
						id: this.postId
					})
					.then((res) => {
						if (res.code == 200) {
							this.postDetail.is_thumb = false;
							this.postDetail.thumb_num--;
						}
					});
			},
			onPostThumbAdd() {
				this.$H
					.post('post/thumbAdd', {
						id: this.postId,
						user_id: this.postDetail.user_id
					})
					.then((res) => {
						if (res.code == 200) {
							this.postDetail.is_thumb = true;
							this.postDetail.thumb_num++;
						}
					});
			},
			follow() {
				this.$H
					.post('user/addFollow', {
						user_id: this.postDetail.user_id
					})
					.then((res) => {
						if (res.code == 200) {
							this.postDetail.is_follow = true;
						}
					});
			},
			cancelFollow() {
				this.$H
					.post('user/cancelFollow', {
						user_id: this.postDetail.user_id
					})
					.then((res) => {
						if (res.code == 200) {
							this.postDetail.is_follow = false;
						}
					});
			},
			previewImage(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.current, // 当前显示图片的http链接
					urls: e.currentTarget.dataset.image // 需要预览的图片http链接列表
				});
			},
			onKeyboardChange() {
				uni.onKeyboardHeightChange((res) => {
					this.toolStyle = {
						bottom: res.height + 'px'
					};
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.post-title {
		margin: 20rpx 0;
	}

	.icon text {
		font-size: 12px;
		color: #999;
		margin-right: 20rpx;
	}

	/*关注*/

	.user-item {
		padding: 30rpx;
		display: flex;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
			border-radius: 50%;
		}

		.btn {
			border: 1px solid #f5f5f5;
			border-radius: 50rpx;
			font-size: 20rpx;
			margin-left: auto;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			line-height: 1;
			padding: 10rpx 20rpx;
		}
	}

	// 分享弹窗
	.share-wrap {
		display: flex;
		padding: 30rpx;
		width: 60%;
		margin: 0 auto;

		.share-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:nth-child(1) {
				margin-right: auto;
			}

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}

	//海报弹窗
	.canvas-box {
		height: 560px;
		position: relative;

		.footer {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			right: 20rpx;
		}
	}

	.expire-box {
		background-color: #999;
		color: #fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	// 轮播图指示器
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.post-content-wrap {
		padding: 30rpx;

		.discuss-item {
			display: inline-block;
			color: #2b85e4;
		}
	}

	.fab-wrap {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;

		.fab-item {
			background-color: $u-primary;
			color: #fff;
			font-size: 24rpx;
			width: 100rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 100rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		}
	}

	.tool-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		border-top: 1px solid #f5f5f5;
		background-color: #fff;
		z-index: 11;

		.input-wrap {
			width: 100%;
		}

		.input-tips {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: #eee;
			border-radius: 100rpx;
			font-size: 24rpx;
			padding: 10rpx 40rpx;
			color: #616161;
			margin-right: 20rpx;
			white-space: nowrap;
		}

		.num-wrap {
			display: flex;
			align-items: center;
			margin: 0 30rpx;

			.num {
				font-size: 24rpx;
				margin-left: 5rpx;
			}
		}

		.comment-input {
			background-color: #f5f5f5;
			border-radius: 20rpx;
			width: calc(100% - 40rpx);
			font-size: 28rpx;
			padding: 20rpx;
		}
	}

	// 评论列表
	.comment-item {
		display: flex;
		font-size: 28rpx;
		padding: 20rpx;

		&:active {
			background-color: #f5f5f5;
		}

		.avatar-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}

		&_right {
			flex: 1;
			line-height: 1.8;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #f5f5f5;

			.nickname {
				margin-bottom: 10rpx;
				color: #999;
			}

			.time-desc {
				font-size: 20rpx;
				color: #999;
			}
		}

		.thumb-wrap {
			margin-left: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20rpx;
			color: #616161;
		}
	}

	.children-comment-item {
		padding: 20rpx;
		margin-left: 90rpx;

		.avatar-img {
			width: 40rpx;
			height: 40rpx;
		}

		.comment-item_right {
			border-bottom: unset;

			.nickname {
				line-height: 1;
			}
		}
	}

	.collapse {
		color: dodgerblue;
	}

	// 圈子信息
	.topic-info {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		background-color: #f5f5f5;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;

		.cover {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}

		.center {
			flex: 1;

			.count-txt {
				color: #999;
			}
		}

		.right {
			margin-left: 20rpx;
			background-color: $themes-color;
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
			color: #fff;
		}
	}
</style>